<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <f:view>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>Contratos</title>
            <link type="text/css" href="../common/css/redmond/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
            <link type="text/css" href="../common/css/administrar.css" rel="stylesheet" />
            
            <script type="text/javascript" src="../common/js/jquery-1.8.0.min.js"></script>
            <script type="text/javascript" src="../common/js/jquery-ui-1.8.23.custom.min.js"></script>
            
            
            <!--<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
            <script type="text/javascript" src="../common/js/jquery.ui.all.js"></script>
            <script type="text/javascript" src="../common/js/jquery.layout.js"></script>
            <script type="text/javascript" src="../common/js/jquery-ui-1.8.6.custom.min.js"></script>
            <script type="text/javascript" src="../common/js/calendarioui-es.js"></script>
            <script type="text/javascript" src="../common/js/jquery.dateentry.js"></script>-->
            
            <script type="text/javascript" src="../common/js/contrato.js"></script>
            <script type="text/javascript" src="../common/js/messages_es.js"></script>
            
            <script type="text/javascript" src="../common/js/jquery.tablesorter.min.js"></script>
            <script type="text/javascript" src="../common/js/jquery.metadata.js"></script>
            <script type="text/javascript" src="../common/js/jquery.tablesorter.pager.js"></script>
            <script type="text/javascript" src="../common/js/jquery.validate.js"></script>
            <script type="text/javascript" src="../common/js/jquery.pagination.js"></script>
            <script type="text/javascript" src="../common/js/jquery.contextMenu.js"></script>
            <link type="text/css" href="../common/css/jquery.contextMenu.css" rel="stylesheet" />
            <link type="text/css" href="../common/css/pagination.css" rel="stylesheet" />
            <script type="text/javascript" src="../common/js/jquery.qtip-1.0.0-rc3.js"></script>
            <style type="text/css" title="currentStyle">
                @import "../common/css/demo_page.css";			
                @import "../common/css/demo_table_jui.css";
            </style>
            
            <link type="text/css" href="../common/css/jquery-ui-timepicker-addon.css" rel="stylesheet" />
            <script type="text/javascript" src="../common/js/jquery-ui-timepicker-addon.js"></script>
            <script type="text/javascript" src="../common/js/jquery-ui-sliderAccess.js"></script>
            <script type="text/javascript" src="../common/js/calendarioui-es.js"></script>
            <script type="text/javascript" src="../common/js/timepicker-es.js"></script>
            
            <script type="text/javascript" language="javascript" src="../common/js/jquery.dataTables.js"></script>

            <script>
                
                var asInitVals = new Array();

                $(document).ready(function() {
                    var oTable = $('#example').dataTable( {
                        "sPaginationType": "full_numbers",
                        "bJQueryUI": true,
                        "bProcessing": true,
                        "bServerSide": true,
                        "sAjaxSource": "/salus/ContratoListaServlet",
                        "oLanguage": {
                            "sLengthMenu": "Mostrar _MENU_ registros por Pagina",
                            "sZeroRecords": "Opps - No se encontraron datos",
                            "sInfo": "Mostrando _START_ a _END_ de _TOTAL_ registros",
                            "sInfoEmpty": "Mostrando 0 a 0 de 0 registros",
                            "sInfoFiltered": "(filtered from _MAX_ total records)"
                        }

                    } );

                    $("tfoot input").keyup( function () {
                        /* Filter on the column (the index) of this element */
                        oTable.fnFilter( this.value, $("tfoot input").index(this) );
                    } );

                    $("tfoot input").each( function (i) {
                        asInitVals[i] = this.value;
                    } );

                    $("tfoot input").focus( function () {
                        if ( this.className == "search_init" )
                        {
                            this.className = "";
                            this.value = "";
                        }
                    } );

                    $("tfoot input").blur( function (i) {
                        if ( this.value == "" )
                        {
                            this.className = "search_init";
                            this.value = asInitVals[$("tfoot input").index(this)];
                        }
                    } ); 
                                
                    $("#example tbody").dblclick(function(event) {
                        $(oTable.fnSettings().aoData).each(function (){
                            $(this.nTr).removeClass('row_selected');
                        });
                        $(event.target.parentNode).addClass('row_selected');
                        var anSelected = fnGetSelected( oTable );                                        
                        var dato=anSelected[0].cells;                                        
                        editar(dato[0].innerHTML,dato[1].innerHTML)
                    });
                    /* Add a click handler for the delete row */
                    $('#delete').click( function() {
                        var anSelected = fnGetSelected( oTable );
                        //oTable.fnDeleteRow( anSelected[0] );
                        var dato=anSelected[0].cells;
                        alert(dato[0].innerHTML);
                    } );
                } );
                function fnGetSelected( oTableLocal )
                {
                    var aReturn = new Array();
                    var aTrs = oTableLocal.fnGetNodes();

                    for ( var i=0 ; i &lt; aTrs.length ; i++ )
                    {
                        if ( $(aTrs[i]).hasClass('row_selected') )
                        {
                            aReturn.push( aTrs[i] );
                        }
                    }
                    return aReturn;
                }

            </script>


        </head>
        <body>

            <div id="adm_contrato" style="width: 100%;">

                <h3 style="text-align: center" class="ui-widget-header">Contratos</h3>


                <table width="100%">
                    <tr>
                        <td align="left">
                            <button id="nuevaContratoBtn">Nuevo</button>       
                        </td>
                        <td align="right">
                            <button id="ayudaBtn">Ayuda</button>               
                        </td>
                    </tr>
                </table>                
                <div class="tooltips"></div>
                <!--
                <input type="hidden" id="cantidad" name="cantidad" value=""/>
                <h3 style="text-align: center" class="ui-widget-header">Contratos</h3>
                <p>
                    <button id="nuevaContratoBtn">Nuevo</button>
                </p>

                <div style="width: 100%" id="buscador-form">
                    <table border="0">
                        <tr valign="top" class="ui-widget-header">
                            <td>C&oacute;digo</td>
                            <td><input type="text" size="20" id="buscarCod" onkeyup="this.value=this.value.toUpperCase()" class="text ui-widget-content ui-corner-all"/></td>
                            <td>Descripci&oacute;n</td>
                            <td><input type="text" size="50" id="buscarDes" onkeyup="this.value=this.value.toUpperCase()" class="text ui-widget-content ui-corner-all"/></td>
                            <td><button id="buscarBtn">Buscar</button></td>
                            <td><button id="clearBtn">Limpiar</button></td>
                        </tr>
                    </table>
                </div>


                <table width="100%" id="tabla-contrato" class="lista" >
                    <thead>
                        <tr>
                            <th>C&oacute;digo</th>
                            <th>Descripci&oacute;n</th>
                            <th class="{sorter: false}">Opciones</th>
                        </tr>
                    </thead>
                    <tbody id="tabla-contrato-body">

                    </tbody>
                </table>
                
                <div id="pager" class="pager">
                    <form>
                        <table>
                            <tr class="ui-widget-header">
                                <td>
                                    <img src="../common/img/first1.png" class="first"/>
                                </td>
                                <td>
                                    <img src="../common/img/prev1.png" class="prev"/>
                                </td>
                                <td>
                                    <input type="text" size="8" class="pagedisplay text ui-widget-content ui-corner-all"/>
                                </td>
                                <td>
                                    <img src="../common/img/next1.png" class="next"/>
                                </td>
                                <td>
                                    <img src="../common/img/last1.png" class="last"/>
                                </td>
                                <td>
                                    <select class="pagesize text ui-widget-content">
                                        <option selected="selected"  value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                        <option  value="40">40</option>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                -->


                <!--DATA TABLE-->                
                <div id="dynamic">
                    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
                        <thead>
                            <tr>
                                <th width="5%">Sec</th>
                                <th width="10%">N&uacute;mero</th>
                                <th width="60%">Descripci&oacute;n</th>
                                <th width="10%">Fecha Inicio</th>
                                <th width="10%">Fecha Fin</th>  
                                <th width="5%">Estado</th>  
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="3" class="dataTables_empty">Loading data from server</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>                                
                                <th><input size="20" type="hidden" name="search_id" value="Secuencial" class="search_init" /></th>                               
                                <th><input type="text" onkeyup="this.value=this.value.toUpperCase()" name="search_numero" value="Numero" class="search_init" /></th>
                                <th><input type="text" onkeyup="this.value=this.value.toUpperCase()" name="search_descripcion" value="Descripci&oacute;n" class="search_init" /></th>
                                <th><input type="text" name="search_fecha1" value="Fecha Inicio" class="search_init" /></th>
                                <th><input type="text" name="search_fecha2" value="Fecha Final" class="search_init" /></th>
                                <th><input type="checkbox" id="estado_contrato" name="search_estado_contrato" value="Estado Contrato" class="search_init" /></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>



            </div>






            <div id="contrato-form" style="display: none">
                <!--
                <input type="text" id="cantidadForm" name="cantidadForm" value="100"/>
                -->

                <div id="tabs_contrato">
                    <ul>
                        <li><a href="#tabs-1">Informacion General</a></li>
                        <li><a href="#tabs-2">Detalle Contrato</a></li>
                        <li><a href="#tabs-3">Informaci&oacute;n Adicional</a></li>

                    </ul>

                    <div id="tabs-1">
                        <form id="formContrato">
                            <input type="hidden" id="op"/>
                            <table>
                                <tr>
                                    <td>Id</td>
                                    <td><input type="text" size="16" name="id" id="id" readonly ="true" class="ui-widget-content" /></td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                </tr>
                                <tr>
                                    <td>C&oacute;digo</td>
                                    <td>
                                        <input type="text" size="16" name="codigo" onkeyup="this.value=this.value.toUpperCase()" id="codigo" value="" class="ui-widget-content" />
                                        <span id="error_num"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Descripci&oacute;n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                                    <td><input type="text" size="50" name="descripcion" onkeyup="this.value=this.value.toUpperCase()" id="descripcion" value="" class="ui-widget-content" /></td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                </tr>
                                <tr>
                                    <td>Entidad</td>
                                    <td>
                                        <select id="id_entidad" name="id_entidad" class="text ui-widget-content"></select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Manual</td>
                                    <td>
                                        <select id="id_manual" name="id_manual" class="text ui-widget-content"></select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Tipo Contrato</td>
                                    <td>
                                        <select id="id_tipo_contrato" name="id_tipo_contrato" class="text ui-widget-content"></select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Regimen</td>
                                    <td>
                                        <select id="id_regimen" name="id_regimen" class="text ui-widget-content"></select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Tipo Documento</td>
                                    <td>
                                        <select id="id_tipo_doc" name="id_tipo_doc" class="text ui-widget-content"></select>
                                    </td>
                                </tr>

                                <tr>
                                    <td>Fecha Inicial</td>
                                    <td>
                                        <input type="text" id="fechaini" name="fechaini" class="ui-widget-content"/>
                                    </td>
                                </tr>

                                <tr>
                                    <td>Fecha Final</td>
                                    <td>
                                        <input type="text" id="fechafin" name="fechafin" class="ui-widget-content"/>
                                    </td>
                                </tr>

                            </table>
                            <br />
                            <table width="100%">
                                <tr align="center" class="ui-widget-header">
                                    <td>Monto Facturaci&oacute;n</td>
                                    <td>Monto Capitaci&oacute;n</td>
                                    <td>Porc Alarma</td>
                                    <td>Upc Anual</td>
                                    <td>Upc Mensual</td>
                                </tr>

                                <tr>
                                    <td align="center">
                                        <input type="text" size="14" id="monto_fac" value="0" name="monto_fac" class="ui-widget-content"/>
                                    </td>
                                    <td align="center">
                                        <input type="text" size="14" id="monto_cap" value="0" name="monto_cap" class="ui-widget-content"/>
                                    </td>
                                    <td align="center">
                                        <input type="text" size="14" id="porc" value="0" name="porc" class="ui-widget-content"/>
                                    </td>
                                    <td align="center">
                                        <input type="text" size="14" id="upcanual" value="0" name="upcanual" class="ui-widget-content"/>
                                    </td>
                                    <td align="center">
                                        <input type="text" size="14" id="upcmes" value="0" name="upcmes" class="ui-widget-content"/>
                                    </td>
                                </tr>
                            </table>
                            <br />
                            <table width="100%">
                                <tr align="center" class="ui-widget-header">
                                    <td>Es Modelo</td>
                                    <td>Es de PyP</td>
                                    <!--<td>Gen&eacute;rico</td>pendiente-->
                                    <td>Activo</td>
                                </tr>

                                <tr>
                                    <td align="center">
                                        <input type="checkbox" id="modelo" name="modelo"/>
                                        <input type="hidden" id="vmodelo" value="Off" name="vmodelo"/>
                                    </td>
                                    <td align="center">
                                        <input type="checkbox" id="pyp" name="pyp"/>
                                        <input type="hidden" id="vpyp" value="Off" name="vpyp"/>
                                    </td>
                                    
                                    <!--
                                    <td align="center">
                                        <input type="checkbox" id="gen" name="gen"/>
                                        <input type="hidden" id="vgen" value="Off" name="vgen"/>
                                    </td>
                                    -->
                                    
                                    
                                    <td align="center">
                                        <input type="checkbox" id="activo" name="activo"/>
                                        <input type="hidden" id="vactivo" value="Off" name="vactivo"/>
                                    </td>
                                    
                                </tr>
                            </table>                        
                        </form>
                    </div>
                    <div id="tabs-2">

                        <table width="100%">
                            <tr>
                                <td class='ui-widget-header' align="center">
                                    Actividades Habilitadas
                                </td>
                                <td class='ui-widget-header' align="center">
                                    Actividades Contratadas
                                </td>
                            </tr>
                            <tr>
                                <td width="50%">
                                    <table border="0" width="100%">
                                        <tr valign="top" class="ui-widget-header">
                                            <td>C&oacute;digo</td>
                                            <td><input type="text" size="20" id="buscarCodh" onkeyup="buscarHabilitadas(1)" class="ui-widget-content"/></td>
                                        </tr>
                                        <tr valign="top" class="ui-widget-header">
                                            <td valign="middle">Grupo</td>
                                            <td valign="middle">
                                                <select id="id_grupo_actividad" name="id_grupo_actividad" onchange="buscarHabilitadas(2)" class="text ui-widget-content"></select>
                                                <img title="Contratar Grupo"  style="cursor: pointer" src="../common/img/adic.png" onclick="pasarGrupo()" styleClass="icon">
                                                </img>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td width="50%">
                                    <table border="0" width="100%">
                                        <tr valign="top" class="ui-widget-header">
                                            <td>C&oacute;digo</td>
                                            <td><input type="text" size="20" id="buscarCodC" onkeyup="buscarContratadas(1)" class="ui-widget-content"/></td>
                                        </tr>

                                        <tr valign="top" class="ui-widget-header">
                                            <td>Grupo</td>
                                            <td>
                                                <select id="id_grupo_actividadC" name="id_grupo_actividadC" onchange="buscarContratadas(2)" class="text ui-widget-content"></select>
                                                <img title="Descontratar Grupo"  style="cursor: pointer" src="../common/img/del1.png" onclick="descontratarGrupo($('#id_grupo_actividadC').val())" styleClass="icon">
                                                </img>
                                            </td>
                                        </tr>

                                    </table>
                                </td>
                            </tr>
                        </table>
                        <table width="100%">
                            <tr>
                                <td valign="top" width="48%">
                                    <div id="acts-habilitadas" style="overflow: auto; height: 360px"></div>
                                </td>
                                <td valign="top">
                                    <div>
                                        <center>

                                        </center>
                                        <br /><br />
                                        <center>
                                            <img title="Contratar Seleccionadas" style="cursor: pointer" src="../common/img/addgruposel.png" onclick="pasarGrupoSel()" styleClass="icon">
                                            </img>
                                        </center>
                                    </div>
                                </td>
                                <td valign="top" width="48%">
                                    <div id="acts-contratadas" style="overflow: auto; height: 360px"></div>                                                                
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td><div id="pagination" class="pagination"></div></td>
                            </tr>
                        </table>



                    </div>
                    <div id="tabs-3">
                        <div id="grupos-contratados"></div>
                    </div>
                </div>
            </div>


            <div id="dialogoBuscarCop" style="display: none">
                <div id="datosCop" style="display: none">
                </div>
            </div>



            <!--
                <div id="myDiv">
                        Right click to view the context menu
                </div>
                <ul id="myMenu" class="contextMenu">
                        <li class="edit"><a href="#edit">Edit</a></li>
                        <li class="cut separator"><a href="#cut">Cut</a></li>
                        <li class="copy"><a href="#copy">Copy</a></li>
                        <li class="paste"><a href="#paste">Paste</a></li>
                        <li class="delete"><a href="#delete">Delete</a></li>
                        <li class="quit separator"><a href="#quit">Quit</a></li>
                </ul>
            -->

            <div class="qtip qtip-stylename">
                <div class="qtip-tip" rel="cornerValue"></div>
                <div class="qtip-wrapper">
                    <div class="qtip-borderTop"></div>
                    <div class="qtip-contentWrapper">
                        <div class="qtip-title">
                            <div class="qtip-button"></div>
                        </div>
                        <div class="qtip-content"></div>
                    </div>
                    <div class="qtip-borderBottom"></div>
                </div>
            </div>

        </body>
    </f:view>
</html>
